<script lang="ts" setup>
import { ref } from 'vue'

// 节点树

import type { ElTree } from 'element-plus'

// 节点操作

// 数据
const data = ref([
  {
    label: '首页',
    key: '/dashboard',
    value: 'dashboard'
  },
  {
    label: '权限管理',
    key: '/permission',
    value: '/permission',
    children: [
      {
        label: '页面管理',
        key: '/permission/pageSetting',
        value: '/permission/pageSetting'
      },
      {
        label: '角色管理',
        key: '/permission/roleSetting',
        value: '/permission/roleSetting'
      },
      {
        label: '菜单管理',
        key: '/permission/navSetting',
        value: '/permission/navSetting'
      }
    ]
  }
])
</script>
<!-- 角色配置 -->
<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>导航配置</span>
        </div>
      </template>
      <el-row class="tac">
        <el-col :span="12">
          <h5 class="mb-2">效果</h5>
          <el-menu class="el-menu-vertical-demo">
            <el-sub-menu :index="item.label" v-for="item in data" :key="item.label">
              <template v-if="item.childred">
                <template>
                  <el-icon><location /></el-icon>
                  <span>
                    {{ item.label }}
                  </span>
                </template>
                <el-menu-item-group v-for="item2 in item.children" :key="item2.label">
                  <el-menu-item :index="item2.value">{{ item2.label }}</el-menu-item>
                </el-menu-item-group>
              </template>
              <template v-else>
                <el-menu-item-group v-for="item2 in item.children" :key="item2.label">
                  <el-menu-item :index="item2.value">{{ item2.label }}</el-menu-item>
                </el-menu-item-group>
              </template>
            </el-sub-menu>
          </el-menu>
        </el-col>
        <el-col :span="12">
          <h5 class="mb-2">配置导航</h5>
          <el-tree :data="data" draggable default-expand-all node-key="label" />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}
</style>
